<template>
    <div>
        <!-- 对人员的添加和根据名称进行模糊查询 -->
        <el-form :inline="true">
            <el-form-item>
                <el-button type="primary" size="medium" icon="el-icon-plus" @click="dialogFormVisible = true" plain>添加</el-button>
            </el-form-item>
            <el-form-item label="姓名" class="ss">
                <el-input prefix-icon="el-icon-search" v-model="name" size="medium" placeholder="请输入员工姓名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="medium" icon="el-icon-search" @click="search" plain>搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 显示数据 -->
        <el-table border :data="datatable">
            <el-table-column fixed type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" class="demo-table-expand">
                        <el-form-item label="密码">
                            <span>{{ props.row.usersPwd }}</span>
                        </el-form-item>
                        <el-form-item label="电话号码">
                            <span>{{ props.row.usersPhone }}</span>
                        </el-form-item>
                        <el-form-item label="电子邮箱">
                            <span>{{ props.row.usersEmail }}</span>
                        </el-form-item>
                        <el-form-item label="入职时间">
                            <el-col :span="11">
                                <span>{{ props.row.entryTime |formatDate}}</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="离职时间">
                            <el-col :span="11">
                                <span>{{ props.row.quitTime  |formatDate}}</span>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="备注">
                            <span>{{ props.row.remarks }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="编号" width="100" prop="usersID"> </el-table-column>
            <el-table-column label="姓名" width="150" prop="usersName"> </el-table-column>
            <el-table-column label="性别" width="150" prop="usersSex"> </el-table-column>
            <el-table-column label="职位" width="150" prop="organization.organizationName"> </el-table-column>
            <el-table-column label="角色" width="150" prop="userRole.roleName"> </el-table-column>
            <el-table-column label="状态" width="150" prop="userState.stateName"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="230">
                <template slot-scope="scope">
                    <el-button
                        type="success"
                        style="margin: 2%"
                        plain
                        icon="el-icon-edit"
                        size="small"
                        @click="update(scope.$index, datatable)"
                        >编辑</el-button
                    >
                    <el-button type="danger" plain icon="el-icon-delete" size="small" @click="Delete(scope.$index, datatable)"
                        >离职</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 点击添加弹出 -->
        <el-dialog title="员工添加" :visible.sync="dialogFormVisible" label-position="left">
            <el-form ref="Tjform" :model="Tjform" label-width="80px" :rules="addrules">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="Tjform.name" placeholder="请输入员工姓名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="Tjform.pwd" placeholder="请输入密码" type="password"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="Tjform.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                    <el-input placeholder="请输入电话号码" v-model="Tjform.phone"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                    <el-input placeholder="请输入电子邮箱" v-model="Tjform.email"></el-input>
                </el-form-item>
                <el-form-item label="职位">
                    <el-select placeholder="请选择职位" v-model="Tjform.organizationID">
                        <el-option
                            v-for="item in zw"
                            :key="item.organizationID"
                            :value="item.organizationID"
                            name="organizationID"
                            :label="item.organizationName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select placeholder="请选择角色" v-model="Tjform.roleID">
                        <el-option
                            v-for="item in js"
                            :key="item"
                            :value="item.roleID"
                            name="roleID"
                            :label="item.roleName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select placeholder="请选择状态" v-model="Tjform.stateID">
                        <el-option
                            v-for="item in State"
                            :key="item"
                            :value="item.stateID"
                            name="stateID"
                            :label="item.stateName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入职时间" prop="Rztime">
                    <el-col :span="11">
                        <el-date-picker
                            type="datetime"
                            value-format="yyyy-MM-dd"
                            v-model="Tjform.Rztime"
                            placeholder="选择日期"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="离职时间">
                    <el-col :span="11">
                        <el-date-picker
                            type="datetime"
                            value-format="yyyy-MM-dd"
                            v-model="Tjform.lztime"
                            placeholder="选择日期"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注" prop="bz">
                    <el-input type="textarea" v-model="Tjform.bz"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Add('Tjform')" plain round>添加</el-button>
                    <el-button plain round @click="resetForm('Tjform')">重置</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" round>取 消</el-button>
            </div>
        </el-dialog>

        <!-- 点击修改弹出 -->
        <el-dialog title="用户修改" :visible.sync="dialogFormVisible2">
            <el-form ref="Xgform" label-width="80px">
                <el-form-item label="编号">
                    <el-input placeholder="请输入员工姓名" v-model="Xgform.usersID"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input placeholder="请输入员工姓名" v-model="Xgform.usersName"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" type="password" v-model="Xgform.usersPwd"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="Xgform.usersSex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input placeholder="请输入电话号码" v-model="Xgform.usersPhone"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱">
                    <el-input placeholder="请输入电子邮箱" v-model="Xgform.usersEmail"></el-input>
                </el-form-item>
                <el-form-item label="职位">
                    <el-select placeholder="请选择职位" v-model="Xgform.organizationID">
                        <el-option
                            v-for="item in zw"
                            :key="item.organizationID"
                            :value="item.organizationID"
                            name="organizationID"
                            :label="item.organizationName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="角色">
                    <el-select placeholder="请选择角色" v-model="Tjform.roleID">
                        <el-option
                            v-for="item in js"
                            :key="item"
                            :value="item.roleID"
                            name="roleID"
                            :label="item.roleName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select placeholder="请选择状态" v-model="Xgform.stateID">
                        <el-option
                            v-for="item in State"
                            :key="item.stateID"
                            :value="item.stateID"
                            name="stateID"
                            :label="item.stateName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="入职时间">
                    <el-col :span="11">
                        <el-date-picker
                            v-model="Xgform.entryTime"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="选择日期"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="离职时间">
                    <el-col :span="11">
                        <el-date-picker
                            v-model="Xgform.quitTime"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="选择日期"
                            style="width: 100%"
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" v-model="Xgform.remarks"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="justify-items: center" type="success" @click="Edit" plain round>修改</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            dialogFormVisible: false,
            dialogFormVisible2: false,
            name: '',
            datatable: [],
            gridtable: [],
            State: [],
            zw: [],
            js:[],
            Tjform: {
                pwd: '',
                name: '',
                email: '',
                sex: '',
                phone: '',
                organizationID: '',
                Rztime: '',
                lztime: '',
                Bz: '',
                stateID: '',
                roleID:''
            },
            addrules: {
                pwd: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
                name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
                email: [
                    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                phone: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
                organizationID: [{ required: true, message: '职位不能为空', trigger: 'change' }],
                stateID: [{ required: true, message: '状态不能为空', trigger: 'change' }],
                Rztime: [{ required: true, message: '入职时间不能为空', trigger: 'blur' }]
            },
            Xgform: {
                usersID: '',
                usersName: '',
                usersPwd: '',
                usersSex: '',
                usersPhone: '',
                usersEmail: '',
                organizationID: '',
                entryTime: '',
                quitTime: '',
                stateID: '',
                remarks: '',
                roleID:''
            }
        };
    },
    created() {
        this.show();
        this.getState();
        this.getorganization();
        this.getRole();
    },
    methods: {
        //显示所有数据
        show() {
            axios.get('https://localhost:44328/OA_Users/GetUsers').then((result) => {
                this.datatable = result.data;
            });
        },
        //获取组织数据绑定下拉框
        getorganization() {
            axios.get('https://localhost:44328/OA_Oraganization/GetGrade').then((result) => {
                //console.log(result.data)
                this.zw = result.data;
            });
        },
        //获取状态数据绑定下拉框
        getState() {
            axios.get('https://localhost:44328/OA_Users/GetState').then((result) => {
                this.State = result.data;
            });
        },
        //获取角色数据绑定下拉框
        getRole() {
            axios.get('https://localhost:44328/OA_Permission/GetRoles').then((result) => {
                //console.log(result.data)
                this.js = result.data;
            });
        },
        //添加人员
        Add(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios
                        .post('https://localhost:44328/OA_Users/AddUsers', {
                            usersPwd: this.Tjform.pwd,
                            usersName: this.Tjform.name,
                            usersEmail: this.Tjform.email,
                            usersSex: this.Tjform.sex,
                            usersPhone: this.Tjform.phone,
                            organizationID: this.Tjform.organizationID,
                            roleID:this.Tjform.roleID,
                            stateID: this.Tjform.stateID,
                            entryTime: this.Tjform.Rztime,
                            quitTime: this.Tjform.lztime,
                            remarks: this.Tjform.Bz
                        })
                        .then((result) => {
                            if (result.data > 0) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.show();
                                this.dialogFormVisible = false;
                            } else {
                                this.$message({
                                    message: '添加失败',
                                    type: 'error'
                                });
                            }
                        });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //修改状态为离职
        Delete(index, rows) {
            axios.put('https://localhost:44328/OA_Users/UpdateState?UsersID=' + rows[index].usersID).then((result) => {
                if (result.data == 1) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.show();
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'error'
                    });
                }
            });
        },
        //修改传值
        update(index, rows) {
            this.dialogFormVisible2 = true;
            this.Xgform.usersID = rows[index].usersID;
            this.Xgform.usersName = rows[index].usersName;
            this.Xgform.usersPwd = rows[index].usersPwd;
            this.Xgform.usersSex = rows[index].usersSex;
            this.Xgform.usersPhone = rows[index].usersPhone;
            this.Xgform.usersEmail = rows[index].usersEmail;
            this.Xgform.organizationID = rows[index].organizationID;
            this.Xgform.roleID = rows[index].roleID;
            this.Xgform.stateID = rows[index].stateID;
            this.Xgform.entryTime = rows[index].entryTime;
            this.Xgform.quitTime = rows[index].quitTime;
            this.Xgform.remarks = rows[index].remarks;
        },
        //修改
        Edit() {
            axios
                .put('https://localhost:44328/OA_Users/UpdateUsers', {
                    usersID: this.Xgform.usersID,
                    usersPwd: this.Xgform.usersPwd,
                    usersName: this.Xgform.usersName,
                    usersEmail: this.Xgform.usersEmail,
                    usersSex: this.Xgform.usersSex,
                    usersPhone: this.Xgform.usersPhone,
                    organizationID: this.Xgform.organizationID,
                     roleID:this.Xgform.roleID,
                    stateID: this.Xgform.stateID,
                    entryTime: this.Xgform.entryTime,
                    quitTime: this.Tjform.lztime,
                    remarks: this.Xgform.remarks
                })
                .then((result) => {
                    if (result.data > 0) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.show();
                        this.dialogFormVisible2 = false;
                    } else {
                        this.$message({
                            message: '修改失败',
                            type: 'error'
                        });
                    }
                });
        },
        //重置
        resetForm(formName) {
            // console.log("123")
            this.$refs[formName].resetFields();
        },
        //根据姓名模糊查询
        search() {
            if (this.name != "") {
                axios.get('https://localhost:44328/OA_Users/GetUsers_MoHu?UsersName=' + this.name).then((result) => {
                    this.datatable = result.data;
                });
            } else {
                this.show();
            }
        }
    }
};
</script>
<style>
.ss {
    padding-left: 20%;
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>